<template>
  <div class="register">
    <my-header></my-header>
    <!-- 头部 -->
    <div class="top">
      <div class="logo"><img src="img/logo.png" /></div>
      <div class="top-l">用户注册</div>
      <div class="top-r">已有账号？<a href="login.html">立刻登录</a></div>
    </div>
    <!-- 主体部分 -->
    <div class="main">
      <div class="reg">
        <ul>
          <li class="phone">
            <label for="phone">手机号</label>
            <input
              type="text"
              name="phone"
              id="phone"
              placeholder="您的手机号码"
              v-model="username"
              v-on:blur="chphone()"
            />
            <span id="msgphone"></span>
          </li>
          <li class="upwd">
            <label for="upwd">密&nbsp;&nbsp;&nbsp;码</label>
            <input
              type="password"
              name="upwd"
              id="upwd"
              placeholder="请输入密码"
              v-model="upwd"
              v-on:blur="chupwd()"
            />
            <span id="msgupwd"></span>
          </li>
          <li class="code">
            <label for="code">验证码</label>
            <input
              type="text"
              name="code"
              id="code"
              placeholder="不区分大小写"
            />
            <span>
              <img
                src="http://127.0.0.1:8080/v1/users/code"
                title="看不清点击换一张"
                alt="code"
                @click="cimg(this)"
                ref="code"
            /></span>
            <span id="code2"></span>
          </li>
          <li>
            <input type="button" value="立即注册" onclick="reg()" />
          </li>
          <li class="agree">
            点击注册即视为同意<a href="#">《用户协议》</a>和<a href="#"
              >《隐私政策》</a
            >
          </li>
          <li>
            <ul class="other">
              <li>使用合作网站账户登录</li>
              <li>
                <a href="#">
                  <div class="coo weibo"></div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="coo qq"></div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="coo weixin"></div>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>
<script>
export default {
  data(){
    return{
      username:'',
      upwd:'',
    }
  },
  methods: {
    // 点击切换验证码
    cimg() {
      this.$refs.code.src =
        "http://127.0.0.1:8080/v1/users/code?t=" + new Date().getTime();
    },
    // 失去焦点验证手机号格式
    //验证手机号格式
    chphone() {
      let reg = /^1[3-9]\d{9}$/;
      if (!reg.test(this.username)) {
        msgphone.style.color = "red";
        msgphone.innerHTML = "手机号格式错误";
        return;
      }else{
        msgphone.style.color = "orange";
        msgphone.innerHTML = "OK";
      }
    },
    //失去焦点验证密码格式
    chupwd() {
      let reg = /^[a-zA-Z0-9]{6,18}$/;
      if (!reg.test(this.upwd)) {
        msgupwd.style.color = "red";
        msgupwd.innerHTML = "密码格式错误";
        return;
      } else {
        msgupwd.style.color = "orange";
        msgupwd.innerHTML = "OK";
      }
    },
  },
};
</script>

<style>
.register input {
  width: 300px;
  height: 30px;
  border: 1px solid #ffa200;
  border-radius: 8px;
  padding: 10px;
  font-size: 18px;
  outline: none;
  background-color: rgb(248, 248, 248, 0.5);
}
.register input:focus {
  box-shadow: 0 0 5px #ffa200;
}
.register input[type="button"] {
  width: 320px;
  height: 45px;
  background-color: #ffa200;
  color: white;
  padding: 0;
  font-size: 24px;
  line-height: 45px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.register input[type="button"]:hover {
  background-color: rgb(221, 129, 0);
}
.register .top {
  width: 1120px;
  height: 100px;
  margin: 0 auto;
  line-height: 50px;
  font-size: 40px;
  font-family: 微软雅黑;
  padding: 0 40px;
}
.register .logo {
  width: 220px;
  height: 100px;
  float: left;
}
.register .top-l {
  float: left;
  line-height: 100px;
}
.register .top-r {
  font-size: 20px;
  float: right;
  line-height: 100px;
}
.register .top-r a:link,
.register .top-r a:visited {
  color: orange;
  text-decoration: none;
}
.register .top-r a:hover,
.register .top-r a:active {
  color: black;
  text-decoration: none;
}
.register .main {
  width: 100%;
  height: 598px;
  margin: 0 auto;
  background: url(../../public/img/bg.jpg) repeat-x center top;
  padding-top: 50px;
}
.register .reg {
  width: 430px;
  height: 430px;
  background: rgb(255, 255, 255, 0.8);
  border-radius: 8px;
  padding: 10px 120px 50px 120px;
  box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.5);
}
.register .reg ul {
  list-style-type: none;
  padding-left: 0;
}
.register .reg li {
  margin-top: 25px;
  text-align: center;
}
.register .reg label {
  display: inline-block;
  width: 70px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  padding-top: 5px;
}
.register .phone span {
  position: absolute;
  display: block;
  right: 20px;
  top: 10px;
  line-height: 34px;
}
.register .upwd span {
  position: absolute;
  display: block;
  right: 20px;
  top: 10px;
  line-height: 34px;
}
/* 输入框通用 */
.register .phone {
  position: relative;
}
.register .upwd {
  position: relative;
}
.register .code {
  position: relative;
}
.register .code img {
  width: 120px;
  height: 50;
}
.register .code span {
  position: absolute;
  display: block;
  right: 20px;
  top: 0;
  line-height: 34px;
  color: #ffffff;
}
.register .code span + span {
  position: absolute;
  display: block;
  right: 140px;
  top: 10px;
  line-height: 34px;
}

.register .agree a:link,
.register .agree a:visited {
  color: rgb(225, 146, 0);
  text-decoration: none;
  border-bottom: 1px dotted orange;
}
.register .agree a:hover,
.register .agree a:active {
  color: rgb(0, 0, 0);
}
.register .other {
  height: 60px;
  border-top: 1px solid gray;
}
.register .other li {
  color: gray;
  font-size: 14px;
  float: left;
  margin-left: 30px;
}
/* 其他登录方式 */
.register .coo {
  width: 36px;
  height: 36px;
  margin-top: -8px;
  cursor: pointer;
}
.register .weibo {
  background: url(../../public/img/weibo.png) no-repeat;
}
.register .weibo:hover {
  background: url(../../public/img/weibo_sel.png) no-repeat;
}
.register .qq {
  background: url(../../public/img/qq.png) no-repeat;
}
.register .qq:hover {
  background: url(../../public/img/qq_sel.png) no-repeat;
}
.register .weixin {
  background: url(../../public/img/weixin.png) no-repeat;
}
.register .weixin:hover {
  background: url(../../public/img/weixin_sel.png) no-repeat;
}
</style>